<template>
  <avue-form v-model="form" :option="option">
    <template slot="menuForm" slot-scope="{ size }">
      <el-button type="primary" :size="size" @click="onSubmit">确定</el-button>
      <el-button :size="size" @click="onClose">取消</el-button>
    </template>
  </avue-form>
</template>

<script>
import { mapState } from 'vuex'
import { deepCopy } from '@/components/canvas/utils/utils'
export default {
  props: {
    viewInfo: {
      type: Object,
      required: true,
    },
  },
  data() {
    let modelInfo = localStorage.getItem('panel-main-tree') || '[]'
    modelInfo = JSON.parse(modelInfo).map((item) => ({ ...item, disabled: item.level === 0 }))
    return {
      form: {},
      option: {
        emptyBtn: false,
        submitBtn: false,
        column: [
          {
            label: '启用',
            prop: 'active',
            type: 'switch',
            span: 24,
            dicData: [
              {
                // label: '启用',
                value: 0,
              },
              {
                // label: '禁用',
                value: 1,
              },
            ],
          },
          {
            label: '仪表盘',
            prop: 'panelId',
            type: 'tree',
            span: 24,
            dicData: modelInfo,
            props: {
              label: 'name',
              value: 'id',
              children: 'children',
            },
          },
        ],
      },
    }
  },
  computed: {
    ...mapState(['curComponent']),
  },
  created() {
    this.form = this.viewInfo || {}
  },
  mounted() {},
  methods: {
    onSubmit() {
      let { active, panelId } = this.form
      this.curComponent.clickView = { active, panelId }
      this.$store.commit('canvasChange')
      this.onClose()
    },
    onClose() {
      this.$emit('onClose')
    },
  },
}
</script>
<style></style>
